<template>
  <div class="dialog">
    <el-dialog :title="titleText" :visible.sync="showDialog" width="45%" top="0" :close-on-click-modal="false" @close="cancel">
      <el-form ref="ruleForm" label-position="left" :model="formData" :rules="rules" class="el-form">
        <el-form-item label="附属品名称:" prop="materialNo" class="w50p">
          <el-select v-model="formData.materialNo" placeholder="请选择">
            <el-option v-for="item in materialTypeList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联产品名称:" prop="productIdList" class="w50p">
          <el-select v-model="formData.productIdList" placeholder="请选择" multiple>
            <el-option v-for="item in prodData" :key="item.productId" :label="item.materialName" :value="item.productId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    materialTypeList: {
      type: Array,
      default: () => []
    },
    prodData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: this.show,
      formData: {
        productIdList: []
      },
      pictureList: [],
      rules: {
        productIdList: [
          {
            required: true,
            message: '请选择关联产品',
            trigger: ['blur', 'change']
          }
        ],
        materialNo: [
          {
            required: true,
            message: '请选择加工附属品',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
    }
  },
  mounted() {
    console.log('materialTypeList', this.materialTypeList);
    console.log('prodData', this.prodData);
  },
  methods: {
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          this.$emit('addEvent', this.formData);
          this.close();
        }
      });
    },
    close() {
      this.$emit('closeDialog');
    },
    cancel() {
      this.$emit('closeDialog');
      this.formData = {
        productMaterialNo: []
      };
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body .el-form .el-form-item .el-form-item__label {
  min-width: 130px !important;
}
</style>
